Ext.define("MyDesktop.ScenarioEntry", {
    extend: "Ext.data.Model",
    fields: [
        {name: 'id', mapping: 'id'},
        {name: 'name', mapping: 'CommonMetaData.title'},
        {name: 'type', mapping: 'entryType'},
        {name: 'description', mapping: 'CommonMetaData.description'}
    ]
});

Ext.define('MyDesktop.ScenariosGrid', {
    extend: 'Ext.grid.Panel',

    requires: [
        'Ext.grid.RowNumberer',
        'Ext.data.Store',
        'Ext.data.JsonReader'
    ],

    /**
     * @cfg {String} the URL for retrieving the project model in JSON
     */
    projectModelUrl: null,

    /**
     * @cfg {Object} the main page selection listener
     */
    pageSelectionListener: null,


    border:false,

    title: 'Scenario Elements',
    collapsible: true,
    region: 'center',
    margin: 0,
    padding: 0,
    bodyPadding: 0,
    //stripeRows: true,

    stateful: false,
    stateId: 'grid',

    //autoHeight: true,
    autoScroll: true,
    maintainFlex: true,

    viewConfig: {
        forceFit:true,
        stripeRows: true
    },

    constructor: function() {
        var cfg = arguments[0];
        //cfg.scroll = false;
        cfg.columns = [
//            gridPlugin,
            {header: "ID", width: 90, sortable: true, dataIndex: 'id'},
            {header: "Entry Name", width: 100, sortable: true, dataIndex: 'name'},
            {header: "Entry Type", width: 200, sortable: true, dataIndex: 'type'},
            {header: "Entry Description", sortable: false, dataIndex: 'description', flex: 1}
        ];

        this.callParent(arguments);
    },

    addHeight: function(delta) {
        this.setHeight(this.getHeight() + delta);

        if (this.parentGrid) {
            this.parentGrid.addHeight(delta);
        }
    },

    initComponent: function() {

        this.store = new Ext.data.Store({
            model: 'MyDesktop.ScenarioEntry',
            proxy: {
                type: 'ajax',
                url : this.projectModelUrl,
                reader: {
                    type: 'json',
                    root:'entries',
                    idProperty:'id'
                }
            }
        });

        this.store.load();

        MyDesktop.ScenariosGrid.superclass.initComponent.call(this);

        var selModel = this.getSelectionModel();
        if (this.pageSelectionListener) {
            var selListener = this.pageSelectionListener;
            selModel.on("selectionchange", function(selModel, selected) {
                if (selected.length == 1) {
                    selListener.selectPage(selected[0].data.id);
                }
            });
        }

        this.on("cellclick", function(grid, rowIndex) {
            //selModel.selectRange(rowIndex, rowIndex);
        });

        this.on("resize", function(grid, adjWidth, adjHeight) {
            //alert("Resizing " + this.id);
        }, this)

    },

    onRender : function(ct, position) {
        MyDesktop.ScenariosGrid.superclass.onRender.apply(this, arguments);

        // Swallowing events allows nesting grids and handling events by the focused grid only
        var myEl = this.getEl();
        myEl.swallowEvent([ 'mouseover', 'mouseout', 'mousedown', 'click', 'dblclick' ]);
    }

});